<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css过渡</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        .slide-fade-enter-active{
            transition: all .8s ease;
        }
        .slide-fade-leave-active{
            transition: all .8s cubic-bezier(1.0,0.5,0.8,1.0);
        }
        .slide-fade-enter,.slide-fade-leave-to{
            margin-left: 200px;
            opacity: 0;
        }
        .slide-fade-enter-to,.slide-fade-leave{
            opacity: 1;
            margin-left: 0;
        }
    </style>
</head>
<body>
<div id="case12-demo2" >
    <button v-on:click="showClick">点击移动&隐藏/显示</button><br>
    <transition name="slide-fade" v-for="ImageSrc in arr">
        <img  v-if="show" v-bind:style="styleSrc" v-bind:src="ImageSrc">
    </transition>
</div>
<script type="text/javascript">
    var case12Demo2=new Vue({
        el:"#case12-demo2",
        data:{
            styleSrc:{
                width:"200px"
            },
            arr:[
                "../images/timg.jpg",
                "../images/timg2.jpg",
                "../images/timg3.png"
            ],
            show:true
        },
        methods:{
            showClick:function () {
                case12Demo2.show=!case12Demo2.show
            }
        }
    })
    console.log(case12Demo2.arr)
</script>
</body>
</html>